<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Flattern - Flat and trendy bootstrap site template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="author" content="" />
<!-- css -->
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/bootstrap-responsive.css" rel="stylesheet" />
<link href="css/fancybox/jquery.fancybox.css" rel="stylesheet">
<link href="css/jcarousel.css" rel="stylesheet" />
<link href="css/flexslider.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
<!-- Theme skin -->
<link href="skins/default.css" rel="stylesheet" />
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="ico/apple-touch-icon-144-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="ico/apple-touch-icon-114-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="ico/apple-touch-icon-72-precomposed.png" />
<link rel="apple-touch-icon-precomposed" href="ico/apple-touch-icon-57-precomposed.png" />
<link rel="shortcut icon" href="ico/favicon.png" />
</head>
<body>
<div id="wrapper">
	<!-- toggle top area -->
	<div class="hidden-top">
		<div class="hidden-top-inner container">
			<div class="row">
				<div class="span12">
					<ul>
						<li><strong>We are available for any custom works this month</strong></li>
						<li>Main office: Springville center X264, Park Ave S.01</li>
						<li>Call us <i class="icon-phone"></i> (123) 456-7890 - (123) 555-7891</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	<!-- end toggle top area -->
	<!-- start header -->
	<header>
	<div class="container">
		<!-- hidden top area toggle link -->
		<div id="header-hidden-link">
			<a href="#" class="toggle-link" title="Click me you'll get a surprise" data-target=".hidden-top"><i></i>Open</a>
		</div>
		<!-- end toggle link -->
		<div class="row nomargin">
			<div class="span12">
				<div class="headnav">
					<ul>
						<li><a href="#mySignup" data-toggle="modal"><i class="icon-user"></i> Sign up</a></li>
						<li><a href="#mySignin" data-toggle="modal">Sign in</a></li>
					</ul>
				</div>
				<!-- Signup Modal -->
				<div id="mySignup" class="modal styled hide fade" tabindex="-1" role="dialog" aria-labelledby="mySignupModalLabel" aria-hidden="true">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
						<h4 id="mySignupModalLabel">Create an <strong>account</strong></h4>
					</div>
					<div class="modal-body">
						<form class="form-horizontal">
							<div class="control-group">
								<label class="control-label" for="inputEmail">Email</label>
								<div class="controls">
									<input type="text" id="inputEmail" placeholder="Email">
								</div>
							</div>
							<div class="control-group">
								<label class="control-label" for="inputSignupPassword">Password</label>
								<div class="controls">
									<input type="password" id="inputSignupPassword" placeholder="Password">
								</div>
							</div>
							<div class="control-group">
								<label class="control-label" for="inputSignupPassword2">Confirm Password</label>
								<div class="controls">
									<input type="password" id="inputSignupPassword2" placeholder="Password">
								</div>
							</div>
							<div class="control-group">
								<div class="controls">
									<button type="submit" class="btn">Sign up</button>
								</div>
								<p class="aligncenter margintop20">
									Already have an account? <a href="#mySignin" data-dismiss="modal" aria-hidden="true" data-toggle="modal">Sign in</a>
								</p>
							</div>
						</form>
					</div>
				</div>
				<!-- end signup modal -->
				<!-- Sign in Modal -->
				<div id="mySignin" class="modal styled hide fade" tabindex="-1" role="dialog" aria-labelledby="mySigninModalLabel" aria-hidden="true">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
						<h4 id="mySigninModalLabel">Login to your <strong>account</strong></h4>
					</div>
					<div class="modal-body">
						<form class="form-horizontal">
							<div class="control-group">
								<label class="control-label" for="inputText">Username</label>
								<div class="controls">
									<input type="text" id="inputText" placeholder="Username">
								</div>
							</div>
							<div class="control-group">
								<label class="control-label" for="inputSigninPassword">Password</label>
								<div class="controls">
									<input type="password" id="inputSigninPassword" placeholder="Password">
								</div>
							</div>
							<div class="control-group">
								<div class="controls">
									<button type="submit" class="btn">Sign in</button>
								</div>
								<p class="aligncenter margintop20">
									Forgot password? <a href="#myReset" data-dismiss="modal" aria-hidden="true" data-toggle="modal">Reset</a>
								</p>
							</div>
						</form>
					</div>
				</div>
				<!-- end signin modal -->
				<!-- Reset Modal -->
				<div id="myReset" class="modal styled hide fade" tabindex="-1" role="dialog" aria-labelledby="myResetModalLabel" aria-hidden="true">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
						<h4 id="myResetModalLabel">Reset your <strong>password</strong></h4>
					</div>
					<div class="modal-body">
						<form class="form-horizontal">
							<div class="control-group">
								<label class="control-label" for="inputResetEmail">Email</label>
								<div class="controls">
									<input type="text" id="inputResetEmail" placeholder="Email">
								</div>
							</div>
							<div class="control-group">
								<div class="controls">
									<button type="submit" class="btn">Reset password</button>
								</div>
								<p class="aligncenter margintop20">
									We will send instructions on how to reset your password to your inbox
								</p>
							</div>
						</form>
					</div>
				</div>
				<!-- end reset modal -->
			</div>
		</div>
		<div class="row">
			<div class="span4">
				<div class="logo">
					<a href="index.html"><img src="img/logo.png" alt="" class="logo" /></a>
					<h1>Flat and trendy bootstrap template</h1>
				</div>
			</div>
			<div class="span8">
				<div class="navbar navbar-static-top">
					<div class="navigation">
						<nav>
						<ul class="nav topnav">
							<li class="dropdown">
							<a href="index.html">Home <i class="icon-angle-down"></i></a>
							<ul class="dropdown-menu">
								<li><a href="index-alt2.html">Homepage 2</a></li>
								<li><a href="index-alt3.html">Homepage 3</a></li>
							</ul>
							</li>
							<li class="dropdown active">
							<a href="#">Features <i class="icon-angle-down"></i></a>
							<ul class="dropdown-menu">
								<li><a href="typography.html">Typography</a></li>
								<li><a href="table.html">Table</a></li>
								<li><a href="components.html">Components</a></li>
								<li><a href="animations.html">56 Animations</a></li>
								<li><a href="icons.html">Icons</a></li>
								<li><a href="icon-variations.html">Icon variations</a></li>
								<li class="dropdown"><a href="#">3 Sliders <i class="icon-angle-right"></i></a>
								<ul class="dropdown-menu sub-menu-level1">
									<li><a href="index.html">Nivo slider</a></li>
									<li><a href="index-alt2.html">Slit slider</a></li>
									<li><a href="index-alt3.html">Parallax slider</a></li>
								</ul>
								</li>
							</ul>
							</li>
							<li class="dropdown">
							<a href="#">Pages <i class="icon-angle-down"></i></a>
							<ul class="dropdown-menu">
								<li><a href="about.html">About us</a></li>
								<li><a href="pricingbox.html">Pricing boxes</a></li>
								<li><a href="testimonials.html">Testimonials</a></li>
								<li><a href="404.html">404</a></li>
							</ul>
							</li>
							<li class="dropdown">
							<a href="#">Portfolio <i class="icon-angle-down"></i></a>
							<ul class="dropdown-menu">
								<li><a href="portfolio-2cols.html">Portfolio 2 columns</a></li>
								<li><a href="portfolio-3cols.html">Portfolio 3 columns</a></li>
								<li><a href="portfolio-4cols.html">Portfolio 4 columns</a></li>
								<li><a href="portfolio-detail.html">Portfolio detail</a></li>
							</ul>
							</li>
							<li class="dropdown">
							<a href="#">Blog <i class="icon-angle-down"></i></a>
							<ul class="dropdown-menu">
								<li><a href="blog-left-sidebar.html">Blog left sidebar</a></li>
								<li><a href="blog-right-sidebar.html">Blog right sidebar</a></li>
								<li><a href="post-left-sidebar.html">Post left sidebar</a></li>
								<li><a href="post-right-sidebar.html">Post right sidebar</a></li>
							</ul>
							</li>
							<li>
							<a href="contact.html">Contact </a>
							</li>
						</ul>
						</nav>
					</div>
					<!-- end navigation -->
				</div>
			</div>
		</div>
	</div>
	</header>
	<!-- end header -->
	<section id="inner-headline">
	<div class="container">
		<div class="row">
			<div class="span4">
				<div class="inner-heading">
					<h2>Tables</h2>
				</div>
			</div>
			<div class="span8">
				<ul class="breadcrumb">
					<li><a href="#"><i class="icon-home"></i></a><i class="icon-angle-right"></i></li>
					<li><a href="#">Features</a><i class="icon-angle-right"></i></li>
					<li class="active">Table</li>
				</ul>
			</div>
		</div>
	</div>
	</section>
	<section id="content">
	<div class="container">
		<!-- Default table -->
		<div class="row">
			<div class="span6">
				<h4>Default styles</h4>
				<table class="table">
				<thead>
				<tr>
					<th>
						#
					</th>
					<th>
						First Name
					</th>
					<th>
						Last Name
					</th>
					<th>
						Username
					</th>
				</tr>
				</thead>
				<tbody>
				<tr>
					<td>
						1
					</td>
					<td>
						Mark
					</td>
					<td>
						Otto
					</td>
					<td>
						@mdo
					</td>
				</tr>
				<tr>
					<td>
						2
					</td>
					<td>
						Jacob
					</td>
					<td>
						Thornton
					</td>
					<td>
						@fat
					</td>
				</tr>
				<tr>
					<td>
						3
					</td>
					<td>
						Larry
					</td>
					<td>
						the Bird
					</td>
					<td>
						@twitter
					</td>
				</tr>
				</tbody>
				</table>
			</div>
			<div class="span6">
				<h4>Default Styles with Zebra-Striping</h4>
				<table class="table table-striped">
				<thead>
				<tr>
					<th>
						#
					</th>
					<th>
						First Name
					</th>
					<th>
						Last Name
					</th>
					<th>
						Username
					</th>
				</tr>
				</thead>
				<tbody>
				<tr>
					<td>
						1
					</td>
					<td>
						Mark
					</td>
					<td>
						Otto
					</td>
					<td>
						@mdo
					</td>
				</tr>
				<tr>
					<td>
						2
					</td>
					<td>
						Jacob
					</td>
					<td>
						Thornton
					</td>
					<td>
						@fat
					</td>
				</tr>
				<tr>
					<td>
						3
					</td>
					<td>
						Larry
					</td>
					<td>
						the Bird
					</td>
					<td>
						@twitter
					</td>
				</tr>
				</tbody>
				</table>
			</div>
		</div>
		<!-- divider -->
		<div class="row">
			<div class="span12">
				<div class="solidline">
				</div>
			</div>
		</div>
		<!-- end divider -->
		<div class="row">
			<div class="span6">
				<h4>Default Styles borders</h4>
				<table class="table table-bordered">
				<thead>
				<tr>
					<th>
						#
					</th>
					<th>
						First Name
					</th>
					<th>
						Last Name
					</th>
					<th>
						Username
					</th>
				</tr>
				</thead>
				<tbody>
				<tr>
					<td rowspan="2">
						1
					</td>
					<td>
						Mark
					</td>
					<td>
						Otto
					</td>
					<td>
						@mdo
					</td>
				</tr>
				<tr>
					<td>
						Mark
					</td>
					<td>
						Otto
					</td>
					<td>
						@TwBootstrap
					</td>
				</tr>
				<tr>
					<td>
						2
					</td>
					<td>
						Jacob
					</td>
					<td>
						Thornton
					</td>
					<td>
						@fat
					</td>
				</tr>
				<tr>
					<td>
						3
					</td>
					<td colspan="2">
						Larry the Bird
					</td>
					<td>
						@twitter
					</td>
				</tr>
				</tbody>
				</table>
			</div>
			<div class="span6">
				<h4>Default Styles with hover enabled</h4>
				<table class="table table-hover">
				<thead>
				<tr>
					<th>
						#
					</th>
					<th>
						First Name
					</th>
					<th>
						Last Name
					</th>
					<th>
						Username
					</th>
				</tr>
				</thead>
				<tbody>
				<tr>
					<td>
						1
					</td>
					<td>
						Mark
					</td>
					<td>
						Otto
					</td>
					<td>
						@mdo
					</td>
				</tr>
				<tr>
					<td>
						2
					</td>
					<td>
						Jacob
					</td>
					<td>
						Thornton
					</td>
					<td>
						@fat
					</td>
				</tr>
				<tr>
					<td>
						3
					</td>
					<td colspan="2">
						Larry the Bird
					</td>
					<td>
						@twitter
					</td>
				</tr>
				</tbody>
				</table>
			</div>
		</div>
		<!-- divider -->
		<div class="row">
			<div class="span12">
				<div class="solidline">
				</div>
			</div>
		</div>
		<!-- end divider -->
		<div class="row">
			<div class="span6">
				<h4>Cutting cell padding in half</h4>
				<table class="table table-condensed">
				<thead>
				<tr>
					<th>
						#
					</th>
					<th>
						First Name
					</th>
					<th>
						Last Name
					</th>
					<th>
						Username
					</th>
				</tr>
				</thead>
				<tbody>
				<tr>
					<td>
						1
					</td>
					<td>
						Mark
					</td>
					<td>
						Otto
					</td>
					<td>
						@mdo
					</td>
				</tr>
				<tr>
					<td>
						2
					</td>
					<td>
						Jacob
					</td>
					<td>
						Thornton
					</td>
					<td>
						@fat
					</td>
				</tr>
				<tr>
					<td>
						3
					</td>
					<td colspan="2">
						Larry the Bird
					</td>
					<td>
						@twitter
					</td>
				</tr>
				</tbody>
				</table>
			</div>
			<div class="span6">
				<h4>Use contextual classes to color table rows</h4>
				<table class="table">
				<thead>
				<tr>
					<th>
						#
					</th>
					<th>
						Product
					</th>
					<th>
						Payment Taken
					</th>
					<th>
						Status
					</th>
				</tr>
				</thead>
				<tbody>
				<tr class="success">
					<td>
						1
					</td>
					<td>
						TB - Monthly
					</td>
					<td>
						01/04/2012
					</td>
					<td>
						Approved
					</td>
				</tr>
				<tr class="error">
					<td>
						2
					</td>
					<td>
						TB - Monthly
					</td>
					<td>
						02/04/2012
					</td>
					<td>
						Declined
					</td>
				</tr>
				<tr class="warning">
					<td>
						3
					</td>
					<td>
						TB - Monthly
					</td>
					<td>
						03/04/2012
					</td>
					<td>
						Pending
					</td>
				</tr>
				<tr class="info">
					<td>
						4
					</td>
					<td>
						TB - Monthly
					</td>
					<td>
						04/04/2012
					</td>
					<td>
						Call in to confirm
					</td>
				</tr>
				</tbody>
				</table>
			</div>
		</div>
	
	</div>
	</section>
	<footer>
	<div class="container">
		<div class="row">
			<div class="span3">
				<div class="widget">
					<h5 class="widgetheading">Browse pages</h5>
					<ul class="link-list">
						<li><a href="#">About our company</a></li>
						<li><a href="#">Our services</a></li>
						<li><a href="#">Meet our team</a></li>
						<li><a href="#">Explore our portfolio</a></li>
						<li><a href="#">Get in touch with us</a></li>
					</ul>
				</div>
			</div>
			<div class="span3">
				<div class="widget">
					<h5 class="widgetheading">Important stuff</h5>
					<ul class="link-list">
						<li><a href="#">Press release</a></li>
						<li><a href="#">Terms and conditions</a></li>
						<li><a href="#">Privacy policy</a></li>
						<li><a href="#">Career center</a></li>
						<li><a href="#">Flattern forum</a></li>
					</ul>
				</div>
			</div>
			<div class="span3">
				<div class="widget">
					<h5 class="widgetheading">Flickr photostream</h5>
					<div class="flickr_badge">
						<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=8&amp;display=random&amp;size=s&amp;layout=x&amp;source=user&amp;user=34178660@N03"></script>
					</div>
					<div class="clear">
					</div>
				</div>
			</div>
			<div class="span3">
				<div class="widget">
					<h5 class="widgetheading">Get in touch with us</h5>
					<address>
					<strong>Flattern studio, Pte Ltd</strong><br>
					 Springville center X264, Park Ave S.01<br>
					 Semarang 16425 Indonesia </address>
					<p>
						<i class="icon-phone"></i> (123) 456-7890 - (123) 555-7891 <br>
						<i class="icon-envelope-alt"></i> email@domainname.com
					</p>
				</div>
			</div>
		</div>
	</div>
	<div id="sub-footer">
		<div class="container">
			<div class="row">
				<div class="span6">
					<div class="copyright">
						<p>
							<span>&copy; Flattern 2013 All right reserved. Designed by</span><a href="http://iweb-studio.com" target="_blank">iweb-studio</a>
						</p>
					</div>
				</div>
				<div class="span6">
					<ul class="social-network">
						<li><a href="#" data-placement="bottom" title="Facebook"><i class="icon-facebook icon-square"></i></a></li>
						<li><a href="#" data-placement="bottom" title="Twitter"><i class="icon-twitter icon-square"></i></a></li>
						<li><a href="#" data-placement="bottom" title="Linkedin"><i class="icon-linkedin icon-square"></i></a></li>
						<li><a href="#" data-placement="bottom" title="Pinterest"><i class="icon-pinterest icon-square"></i></a></li>
						<li><a href="#" data-placement="bottom" title="Google plus"><i class="icon-google-plus icon-square"></i></a></li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	</footer>
</div>
<a href="#" class="scrollup"><i class="icon-chevron-up icon-square icon-32 active"></i></a>
<!-- javascript
    ================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/jcarousel/jquery.jcarousel.min.js"></script>
<script src="js/jquery.fancybox.pack.js"></script>
<script src="js/jquery.fancybox-media.js"></script>
<script src="js/google-code-prettify/prettify.js"></script>
<script src="js/portfolio/jquery.quicksand.js"></script>
<script src="js/portfolio/setting.js"></script>
<script src="js/tweet/jquery.tweet.js"></script>
<script src="js/jquery.flexslider.js"></script>
<script src="js/jquery.nivo.slider.js"></script>
<script src="js/modernizr.custom.79639.js"></script>
<script src="js/jquery.ba-cond.min.js"></script>
<script src="js/jquery.slitslider.js"></script>
<script src="js/animate.js"></script>
<script src="js/custom.js"></script>
</body>
</html>